<template>
  <div>
    <!-- 题目搜索行 -->
    <el-row>
      <el-col :span="8">
        <div class="spanconent"></div>
      </el-col>
      <!-- 搜索题目输入框 -->
      <el-col :span="8">
        <div style="margin-top: 15px;">
          <el-input placeholder="请输入查找题目" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="spanconent"></div>
      </el-col>
    </el-row>

    <!-- 题目列表 -->
    <el-row :gutter="20">
      <el-col :span="4"><div class="spanconent"></div></el-col>

      <el-col :span="16">
        <el-table :data="problemTableData" stripe style="width: 100%">
          <el-table-column prop="problemId" label="编号"> </el-table-column>

          <el-table-column prop="problemName" label="题目名称">
            <template slot-scope="scope">
              <router-link :to="{ path: `/problem/${scope.row.problemId}` }">{{
                scope.row.problemName
              }}</router-link>
            </template>
          </el-table-column>

          <!-- <el-table-column
                prop="acceptCount"
                label="通过">
                </el-table-column>

                <el-table-column
                prop="submitCount"
                label="提交">
                </el-table-column>

                   <el-table-column
                prop="passRate"
                label="通过率">
                </el-table-column> -->
        </el-table>
      </el-col>

      <el-col :span="4"> <div class="spanconent"></div></el-col>
    </el-row>

    <!-- 题目分页区 -->
    <el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageParam.pageNo"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageParam.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 分页数据
      pageParam: {
        pageSize: 5,
        pageNo: 1,
        param: {}
      },
      // 总共条数
      total: 0,

      problemTableData: []
    };
  },
  methods: {
    handleSizeChange(newSize) {
      this.pageParam.pageSize = newSize;
      this.getProblemList();
    },
    handleCurrentChange(newNum) {
      this.pageParam.pageNo = newNum;
      this.getProblemList();
    },
    // 获取用户排名分页数据
    async getProblemList() {
      const { data: res } = await this.$http.post(
        "problem/page",
        this.pageParam
      );

      if (res.meta.code !== 200) {
        return this.$message.error("获取用户排名失败");
      }

      this.problemTableData = res.data.records;
      this.total = res.data.total;
      console.log(res);
    }
  },
  created() {
    //获取问题列表

    this.getProblemList();
  }
};
</script>

<style scoped>
a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}
</style>
